<template>
    <div class="list">
        <div class="action_bar">
            <div class="export_btn">
              <el-button style="background:#31bdce;color:white;" @click="handleExportVal">导出</el-button>
              <el-button style="background:#31bdce;color:white;" @click="dialogImportVisible = true">导入</el-button>
                <el-popover
                    placement="right"
                    width="120"
                    trigger="hover"
                    content="点击下载导入模板">
                    <el-button class="downloadBtn" circle slot="reference" icon="el-icon-paperclip" @click="downloadFileClick"></el-button>
                </el-popover>
            </div>
            <div class="search">
                <input type="text" v-model="search" @keyup.enter="elsearch">
                <button @click="elsearch">搜索</button>
            </div>
        </div>

        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
            class="tables"
        >
        <el-table-column prop="userid" label="id"> </el-table-column>
            <el-table-column prop="username" label="用户名"> </el-table-column>
            <el-table-column prop="department" label="所属区域">
            <template slot-scope="scope">
                <span>{{scope.row.dept_name}}</span>
            </template>
            </el-table-column>
            <el-table-column prop="realname" label="单位"> </el-table-column>
            <el-table-column prop="contact" label="联系人"> </el-table-column>
            <el-table-column prop="m_phone" label="手机号" width="130"> </el-table-column>
            <el-table-column prop="add_time" label="创建时间">
            <template slot-scope="scope">
                <span>{{scope.row.add_time | formatDated}}</span>
            </template>
            </el-table-column>
            <el-table-column prop="member" label="角色" width="100">
            <template slot-scope="scope">
                <span>{{scope.row.member | userd}}</span>
            </template>
            </el-table-column>
            <el-table-column prop="last_login" label="最近一次登录时间" width="">
            <template slot-scope="scope">
                <span>{{scope.row.last_login | formatDated}}</span>
            </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="tables_bj(scope.row)">
                编辑
                </el-button>
                <el-button type="text" size="small" @click="deleted(scope.row)" style="color:red">
                删除
                </el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[12, 20, 30, 40]"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="total"
            class="pageing"
            background
        >
        </el-pagination>


        <!-- 编辑 -->
        <el-dialog
        title="编辑"
        :visible.sync="drawer"
        width="650px"
        :close-on-click-modal="false"
        :before-close="handleClose">
        <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="diagol"
            >
            <el-form-item label="用户名:" prop="name">
                <el-input
                type="text"
                v-model="ruleForm.name"
                autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="联系人:" prop="contact">
                <el-input
                type="text"
                v-model="ruleForm.contact"
                autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="单位:" prop="realname">
                <el-input
                type="text"
                v-model="ruleForm.realname"
                autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="手机号:" prop="phone">
                <el-input
                type="text"
                v-model="ruleForm.phone"
                autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="所属区域:" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择">
                    <el-option
                        v-for="item in optionsd"
                        :key="item.value"
                        :label="item.dept_name"
                        :class="{'activeTwo' : item.level == 1 , 'activethree' : item.level == 2}"
                        :value="item.dept_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="登陆密码:" prop="pass">
                <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="角色:" prop="role">
                <el-select v-model="ruleForm.role" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="diagol_btn">
                <el-button @click="drawer = false">取消</el-button>
                <el-button type="primary" @click="edit('ruleForm')"
                >编辑账号</el-button
                >
            </el-form-item>
        </el-form>
        </el-dialog>

        <!-- 导入弹框 -->
        <el-dialog
        title="导入数据"
        :visible.sync="dialogImportVisible"
        width="400px"
        :before-close="handleImportClose"
        class="audit"
        >
        <el-upload
            v-loading.fullscreen.lock="fullscreenLoading"
            class="upload-demo"
            drag
            action="/api/user/importuser"
            :data={type:this.type}
            auto-upload:false
            :show-file-list="false"
            :on-success="handleChange"
            :on-error="handleError"
            :on-progress="openUp"
            :before-upload="beforeUpload"
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">点击或拖拽excel到此处</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogImportVisible = false"
            >关闭</el-button
            >
        </span>
        </el-dialog>

        <!-- 导入弹框end -->
    </div>
</template>

<script>
import {userList,userEdit,userDel,userquery,deptlist} from '@/utils/index.js'
export default {
    props:['type'],
    data(){
        return{
            search:'',
            currentPage1: 1,
            tableData:[],
            drawer:false,
            total:0,
            ruleForm: {
                pass: "",
                role: "",
                name:'',
                contact:'',
                phone:'',
                region:'',
                realname:''
            },
            rules: {},
            options:[{id:0,name:'普通会员'},{id:1,name:'管理员'},{id:2,name:'超级管理员'}],
            optionsd:[],
            userid:'',
            // 导入数据
            dialogImportVisible: false,
            fullscreenLoading: false,
        }
    },
    created(){
        deptlist({type:'list'}).then((res)=>{
            this.optionsd = res.data
            // res.data.forEach((item)=>{
            //     this.optionsd.push(item)
            //     item.child.forEach((item1)=>{
            //     console.log(item)
            //     console.log(item1)
            //     this.optionsd.push(item1)
            //     })
            // })
        })

        this.getUserListBox();

        setTimeout(()=>{
            // console.log(this.$store.state.userInfo.member)
            if(this.$store.state.userInfo.member == 1){
                this.options.splice(2,1)
            }
        },500)
    },
    methods:{

        getUserListBox() {
            userList({
                type:this.type
            }).then((res)=>{
                // console.log(res)
                this.tableData = res.data.data
                this.total = res.data.total
            })
        },

        // 搜索
        elsearch() {
            userList({
                name:this.search,
                type:this.type
            }).then((res)=>{
                this.tableData = res.data.data
                this.total = res.data.total
            })
        },

        //清除搜索框内容
        clearSearchVal() {
            console.log(this.type)
            this.search = '';
            this.getUserList('1')
        },

        // 导出操作
        handleExportVal() {
            window.location.href = "/api/user/exportxls?name=" + this.search +"&type=" + this.type;
        },

        getUserList(page) {
            userList({
                name:this.search,
                page:page,
                type:this.type
            }).then((res)=>{
                this.tableData = res.data.data
                this.total = res.data.total
            })
        },

        // 分页
        handleCurrentChange(val) {
            // console.log(this.type)
            this.page=val
            this.getUserList(val)
            // userList({
            //     page:val,
            //     type:this.type
            // }).then((res)=>{
            //     this.tableData = res.data.data
            //     this.total = res.data.total
            // })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 抽屉
        handleClose() {
            this.drawer = false
        },
        // 进入编辑
        tables_bj(index) {
            this.drawer = true
            this.userid = index.userid
            userquery({userid:index.userid}).then((res)=>{
                // this.ruleForm.pass = res.data.password
                this.ruleForm.role = Number(res.data.member)
                this.ruleForm.name = res.data.username
                this.ruleForm.contact = res.data.contact
                this.ruleForm.phone = res.data.m_phone
                this.ruleForm.realname = res.data.realname
                this.ruleForm.region = Number(res.data.department)
            })
        },
        // 编辑按钮
        edit(){
            if(this.ruleForm.pass == ''){
                userEdit({
                    userid:this.userid,
                    member:this.ruleForm.role,
                    username:this.ruleForm.name,
                    contact:this.ruleForm.contact,
                    m_phone:this.ruleForm.phone,
                    realname:this.ruleForm.realname,
                    department:this.ruleForm.region
                }).then((res)=>{
                    if(res.code == '0'){
                    this.$message.closeAll()
                    this.$message.success('修改成功')
                    setTimeout(()=>{
                        this.drawer = false
                        window.location.reload();
                    },800)
                    }else{
                    this.$message.closeAll()
                    this.$message.warning(res.msg)
                    }
                })
            }else{
                userEdit({
                    userid:this.userid,
                    password:this.ruleForm.pass,
                    member:this.ruleForm.role,
                    username:this.ruleForm.name,
                    contact:this.ruleForm.contact,
                    m_phone:this.ruleForm.phone,
                    realname:this.ruleForm.realname,
                    department:this.ruleForm.region
                }).then((res)=>{
                    if(res.code == '0'){
                    this.$message.closeAll()
                    this.$message.success('修改成功')
                    setTimeout(()=>{
                        this.drawer = false
                        window.location.reload();
                    },800)
                    }else{
                    this.$message.closeAll()
                    this.$message.warning(res.msg)
                    }
                })
            }
            
        },
        // 删除
        deleted(row){
        // console.log(row)
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                userDel({
                userid:row.userid
                }).then((res)=>{
                if(res.code == '0'){
                    this.$message.closeAll()
                    this.$message.success('删除成功')
                    window.location.reload();
                    // userList().then((res)=>{
                    //   console.log(res)
                    //   this.tableData = res.data.data
                    //   this.totals = res.data.total
                    // })
                }else{
                    this.$message.closeAll()
                    this.$message.warning(res.msg)
                }
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });
            });
        },
        // 导入数据
        handleImportClose(done) {
            console.log(done);
            done();
        },
        handleChange(file) {
            console.log(file)
            this.$message.success("上传成功");
            this.fullscreenLoading = false;
            this.dialogImportVisible = false;
            this.getUserListBox();
        },
        handleError(file) {
            console.log(file)
            this.$message.warning("上传失败，请检查上传文件格式");
            this.fullscreenLoading = false;
        },
        // 文件上传时
        openUp() {
            this.fullscreenLoading = true;
            },
            // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
            beforeUpload(file) {
            console.log(file);
            let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
            if (extension !== "xlsx") {
                this.$message.warning("只能上传后缀是.xlsx的文件");
                return false;
            }
        },

        // 点击下载导入模板
        downloadFileClick() {
            console.log('111')
            window.location.href = "/用户模板表.xlsx";
        },

    }

}
</script>

<style lang="scss" scoped>
.pageing::v-deep {
  float: right;
  margin-top: 15px;
  .el-pager {
    vertical-align: middle;
  }
}
.diagol::v-deep {
  .el-input {
    width: 90% !important;
  }
  .el-select {
    width: 100% !important;
  }
}
.diagol_btn {
  text-align: right;
  // position: absolute;
  // bottom: 0px;
  // right: 60px;
  margin-right: 36px;
}
.optionsd{
  padding-left: 40px;
}
.activeTwo{
    margin-left: 30px;
}
.activethree{
    margin-left: 50px;
}
.search{
    float: right;
    font-size: 0;
    border: 1px solid #ccc;
    margin-bottom: 30px;
}
.search input{
    height: 36px;
    vertical-align: top;
    border: 0;
    outline: none;
    padding: 0 7px;
    font-size: 14px;
}
.search button{
    height: 36px;
    border: 0;
    padding: 0 20px;
    background-color: #31bdce;
    color: white;
}
.search button:hover{
  cursor: pointer;
}
.action_bar {
    display: flex;
    justify-content: space-between;
}

.downloadBtn {
    border: 0;
    margin-left: 10px;
}

.downloadBtn:hover, .downloadBtn:focus {
    background-color: #fff;
}
</style>